<template>
    <Card>
        <p slot="title">近7日防火巡查情况</p>
        <div class="chart" id="chart-recent-patrol"></div>
        <Divider />
        <span class="text">同比上周期增长情况：持平</span>
        <Spin v-show="loading" fix size="large" />
    </Card>
</template>

<script>
import axios from 'axios'
    export default {
        name: '',
        data() {
            return {
                loading:false,
                option:null
            }
        },
        methods: {
            renderChart(){
                this.loading = true;
                var params = {
                    startTime:this.dateShift(-6) + ' 00:00:00',
                    endTime:this.dateShift(0) + ' 23:59:59'
                }
                axios.get(this.URLHEAD_DVS + 'getDangerPatrolSpread',{params:params}).then(res=>{
                    let json = res.data;
                    this.option = {
                        grid:{
                            top:20,left:20,right:40,bottom:40,containLabel:true
                        },
                        tooltip:{
                            show:true,trigger:'item',axisPointer:{type:'shadow'}
                        },
                        xAxis:{
                            type:'category',
                            data:json.Data.list.map(o=>{
                                return o.time
                            }),
                            axisLine:{show:true},
                            axisLabel:{show:true,color:'#444',fontSize:12},
                            splitLine:{show:true,color:'#00000020'},
                            splitArea:{show:true,color:'#00000012'}
                        },
                        yAxis:{
                            type:'value',
                            axisLine:{show:true},
                            axisLabel:{show:true,color:'#444',fontSize:12},
                            splitLine:{show:true,color:'#00000020'},
                            splitArea:{show:true,color:'#00000012'}
                        },
                        series:[{
                            name:'巡查完成情况',
                            type:'line',
                            itemStyle:{
                                normal:{
                                    color:this.COLORS[3],
                                    show:true
                                }
                            },
                            lineStyle:{
                                color:this.COLORS[3],
                                width:3,
                                shadowColor:'#00000050',
                                shadowBlur:10,
                                shadowOffsetX:0,
                                shadowOffsetY:3
                            },
                            areaStyle:{
                                color:this.COLORS[3]+'50'
                            },
                            data:json.Data.list.map(o=>{
                                return {
                                    name:o.time,
                                    value:o.xcs
                                }
                            })
                        }]
                    }
                    this.$Crender('chart-recent-patrol',this.option)
                    this.loading = false;
                })
            }
        },
        mounted() {
            this.renderChart();
        },
    }
</script>

<style scoped>
    .chart{
        height:410px;
    }
</style>